<template>
  <div class="space-create">
    <el-card class="space-card">
      <div class="space-header">
        <h2>创建空间</h2>
        <el-alert title="级别介绍" type="info" show-icon class="level-alert">
          <div>
            <p>目前仅支持开通 <b>普通版</b>，如需升级空间请联系作者。</p>
            <el-table
              :data="levelData"
              border
              size="small"
              class="level-table"
              style="margin-top: 10px"
            >
              <el-table-column prop="name" label="空间级别" width="300px" />
              <el-table-column prop="size" label="空间大小" width="300px" />
              <el-table-column prop="count" label="空间数量" width="300px" />
            </el-table>
          </div>
        </el-alert>
      </div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="90px" class="space-form">
        <el-form-item label="空间名称" prop="spaceName">
          <el-input
            v-model="form.spaceName"
            placeholder="请输入空间名称"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="空间级别" prop="spaceLevel">
          <el-select v-model="form.spaceLevel" placeholder="请选择空间级别" disabled>
            <el-option label="普通版" :value="0" />
            <el-option label="专业版" :value="1" disabled />
            <el-option label="旗舰版" :value="2" disabled />
          </el-select>
        </el-form-item>
        <el-form-item label="空间类型" prop="spaceType">
          <el-select v-model="form.spaceType" placeholder="请选择空间类型">
            <el-option label="私人空间" :value="0" />
            <el-option label="团队空间" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">创建空间</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { addSpaceAPI } from '@/api/spaceAPI'

const formRef = ref()
const form = ref({
  spaceName: '',
  spaceLevel: 0, // 默认普通版
  spaceType: 0, // 默认私人空间
})

const rules = {
  spaceName: [{ required: true, message: '请输入空间名称', trigger: 'blur' }],
  spaceLevel: [{ required: true, message: '请选择空间级别', trigger: 'change' }],
}

const levelData = [
  { name: '普通版', size: '100MB', count: '100' },
  { name: '专业版', size: '1000MB', count: '1,000' },
  { name: '旗舰版', size: '10,000MB', count: '10,000' },
]

const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await addSpaceAPI(form.value)
        ElMessage.success('空间创建成功')
        form.value.spaceName = ''
        form.value.spaceLevel = 0
      } catch (e) {
        ElMessage.error('空间创建失败')
        console.log(e)
      }
    }
  })
}
</script>

<style scoped>
.space-create {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 80vh;
  background: #f7f8fa;
  padding: 40px 0;
}
.space-card {
  min-width: 50%;
  padding: 32px 32px 24px 32px;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.space-header {
  margin-bottom: 24px;
}
.space-header h2 {
  margin: 0 0 12px 0;
  font-weight: 600;
  font-size: 22px;
  color: #222;
}
.level-alert {
  width: 100%;
  margin-bottom: 0;
  background: #f4f8ff;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.level-table {
  margin-top: 20px;
  background: #fff;
}
.space-form {
  margin-top: 16px;
}
</style>
